JimmyRun 博客 |
您所在的位置：网站首页 › 服务器 github › JimmyRun 博客 |
JimmyRun 博客
|
创建一个新的react app项目 创建项目脚手架资料123https://github.com/sindresorhus/awesome-electronhttps://github.com/vitejs/awesome-vite#templates 配环境 把火绒退出，杀毒软件的锅 参考链接：https://www.cnblogs.com/makalochen/p/16154510.html 国内源的问题： 打开npm的配置文件 1npm config edit在空白处将下面几个配置添加上去,注意如果有原有的这几项配置，就修改 123registry=https://registry.npmmirror.comelectron_mirror=https://cdn.npmmirror.com/binaries/electron/electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
然后关闭该窗口，重启命令行，删除node_modules文件夹，并重新安装依赖 1npm install再次删除node_modules文件夹，并执行下面的命令清除缓存 1npm cache clean --force再次安装 1npm install MinGW-w64安装https://shaogui.life/2021/03/10/windows上安装minGW/ 123npm rm -g create-react-appnpm install -g create-react-appnpx create-react-app my-appadd this inside package.json file before closing the “}” 123456,"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject"} Electron项目创建的三种方法https://blog.csdn.net/weixin_40629244/article/details/115618121 克隆仓库，快速启动克隆项目；git clone https://github.com/electron/electron-quick-start2. 进入这个项目下； 1cd electron-quick-start安装依赖；1npm install运行项目；1npm start打开快速启动的项目，主要有以下几个文件： (1). index.html ，渲染进程； (2). render.js，渲染进程，在index.html中引用； (3). main.js，主进程； (4). preload.js，监听DOM加载完成，在主进程中调用。 通过脚手架搭建项目electron-forge是一个用来搭建electron项目的脚手架，不仅可以用来运行项目，还可以用来打包项目。官网：Getting Started - Electron Forge(https://www.electronforge.io/) 如果电脑上安装了安装了最新版本的 node 可以使用 npx 创建项目，如果安装了 yarn 也可以使用 yarn 创建项目；1npx create-electron-app my-new-app或者 1yarn create electron-app my-new-app运行项目；1234// 进入项目cd my-new-app// 启动项目npm start如果无法使用npx或是yarn安装项目，可以用传统的方法来完成。 1234567891011// 安装脚手架npm install -g @electron-forge/cli// 初始化项目electron-forge init my-new-app// 进入项目cd my-new-app// 启动项目npm startGitHub - electron-userland/electron-forge: A complete tool for creating, publishing, and installing modern Electron applications 手动创建项目 新建项目文件夹； 新建渲染进程 index.html 文件与主进程 main.js 文件； 初始化项目，创建package.json； 1npm init请注意，package.json中的主文件必须名为main.js。 在项目中安装Electron；虽然在全局有安装Electron，但是在写代码的时候并没有提示，所以需要进入项目中安装一下，这样就会有提示了。 cnpm i electron --save-dev5. 编写主进程main.js代码； 123456789101112131415161718192021222324252627282930313233 const { app, BrowserWindow } = require("electron");const path = require("path"); const createWindow = ()=>{ // 创建窗口 const mainWindow = new BrowserWindow({ width: 800, height: 600 }); // 加载本地文件 mainWindow.loadFile(path.join(__dirname,"index.html")); // 加载远程地址 // mainWindow.loadURL('https://github.com');} // 监听应用的启动事件app.on("ready",createWindow); // 兼容MacOS系统的窗口关闭功能app.on("window-all-closed",()=>{ // 非MacOS直接退出 if(process.platform!="darwin"){ app.quit(); }}); // 点击MacOS底部菜单时重新启动窗口app.on("activate",()=>{ if(BrowserWindow.getAllWindows.length==0){ createWindow(); }})引入eslint 检查代码；(1). 安装eslint； 1cnpm install -g eslint(2). 在项目中初始化eslint； 1eslint --init初始化时会有各种选项，选项可以参考下面的结果。 运行项目；1electron .效果如下：
|
【本文地址】
今日新闻 |
推荐新闻 |